//教学班管理
<template>
<div class="assessment-container" style="width:100%">
  <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xqName"
            style="width: 90px"
            size="mini"
            clearable
            placeholder="请选择"
            @change="handleXq"
          >
            <el-option
              v-for="(item,index) in xqList"
              :key="index"
              :label="item.name"
              :value="index"
            >
            </el-option>
          </el-select>
        </div>
         <div class="search-button" @click="queryInfo">
          <img src="../../../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
  <div class="manual-entry-container">
    <div>
      <ul>
        <li>
          <span class="active">开课</span>
          <span>{{ kkCount }}门</span>
          <span class="active">授课教研室</span>
          <span>{{ skjysCount }}个 </span>
          <span class="active">上课专业班次</span>
          <span>{{ skzybcCount }} 个 </span>
        </li>
        <li>
          <span class="active">教学班</span>
          <span>{{ jxbCount }} 个</span>
          <span class="active">总学时</span>
          <span>{{ zxsCount }}</span>
        </li>
        <li>
          <div class="tables-header">
            <div>系</div>
            <div>教研室</div>
            <div class="column-dir">
              <div class="header-1">教学班</div>
              <div class="header-2">
                <div class="wid-4">未提交</div>
                <div class="wid-4">已提交</div>
                <div class="wid-4">已评审</div>
                <div class="wid-4">合计</div>
              </div>
            </div>
            <div class="column-dir">
              <div class="header-1">上课专业班次</div>
              <div class="header-2">
                <div class="wid-3">已安排</div>
                <div class="wid-3">未安排</div>
                <div class="wid-3">总学时</div>
              </div>
            </div>
          </div>
        </li>
        <div v-for="(item, index) in tableData" :key="index">
          <div class="tables-cont">
            <div class="xi"><span class="undeLine" @click="researshOffice_Xi(item)">{{ item.xi }}</span></div>
            <div class="other">
              <div v-for="data in item.list" :key="data.id" class="tables-item">
                <div><span class="undeLine" @click="researshOffice(data)">{{ data.jys }}</span></div>
                <div class="column-dir">
                  <div class="header-2">
                    <div class="wid-4">{{ data.wtj }}</div>
                    <div class="wid-4">{{ data.ytj }}</div>
                    <div class="wid-4">{{ data.yps }}</div>
                    <div class="wid-4">{{ data.hj }}</div>
                  </div>
                </div>
                <div class="column-dir">
                  <div class="header-2">
                    <div class="wid-3">{{ data.yap }}</div>
                    <div class="wid-3">{{ data.wap }}</div>
                    <div class="wid-3">{{ data.zxs }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ul>
    </div>
  </div>
  <div class="bottom-block" style="display: block;width: calc(100% - 40px);margin: 0 auto;">
      <div class="text">
        当前共找到{{ total }}条记录,当前显示{{ startPage }}-{{ endPage }}条
      </div>
    </div>
    <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
</div>
</template>

<script>
import {jxbgl_query_class_list, queryCommonXueqi, jxbgl_query_class_top, queryDefaultXueQi} from "@/api/trainingManagement/place.js";
export default {
  name: "workOutClass",
  data() {
    return {
      xq: "", //学期
      xqName:"",
      xqList:[], //学期列表
      kkCount: "", // 学期
      skjysCount: "", //课程编号
      skzybcCount: "", //上课专业班次
      jxbCount: "", //教学班
      zxsCount: "", // 课程名称
      tableData: [],
      parameterNameArr: [], //对象名称集
      total: 0, //总条数
      pageSize: 50, //条数
      startPage: 0, //开始条数
      endPage: 0, //结束条数
      currentPage: 1, //当前页数
    };
  },
  mounted() {
    // this.queryCommonXueqi();
    this.getDefaultXueQi()
  },
  methods: {
    handleXq(index){
      this.xq = this.xqList[index].id;
      this.xqName = this.xqList[index].name;
    },
    async getDefaultXueQi(){
      queryDefaultXueQi().then(res=>{
        if(res.data.code == 200){
          this.xq = res.data.data
        }
      }).then(()=>{
        this.queryCommonXueqi()
      })
    },
    queryInfo() {
      this.queryClassList();
      this.queryClassTop();
    },
    async queryCommonXueqi() {
      const res = await queryCommonXueqi();
      if (res.data.code == 200) {
        this.xqList = res.data.data;
        this.xq = res.data.data[0].id;
        this.xqName = res.data.data[0].name;
        this.queryClassList();
        this.queryClassTop();
      }
    },
    // 查询头部数据
    async queryClassTop() {
      var xq = this.xq;
      // 校区暂时传空
      const res = await jxbgl_query_class_top(xq);
      if (res.data.code == 200) {
        this.kkCount = res.data.data.kkCount; //开课
        this.skjysCount = res.data.data.skjysCount; //授课教研室
        this.skzybcCount = res.data.data.skzybcCount; //上课专业班次
        this.jxbCount = res.data.data.jxbCount; //教学班
        this.zxsCount = res.data.data.zxsCount; //总学时
      }
    },
    async queryClassList() {
      var xq = this.xq;
      var current= this.currentPage;
      var size = this.pageSize;
      // 校区暂时传空
      const res = await jxbgl_query_class_list(xq, current, size);
      if (res.data.code == 200) {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        var length = 0;
        res.data.data.records.forEach(item => {
          length += parseInt(item.list.length);
        });
        this.calculatePage(this.pageSize, res.data.data.current, length);
      }
    },
     // 计算开始和结束条数
    calculatePage(pageSize, current, length) {
      if (current == 1) {
        if (length != 0) {
          this.startPage = 1;
          this.endPage = length;
        }
      } else {
        this.startPage = pageSize * (current - 1) + 1;
        this.endPage = parseInt(this.startPage) + parseInt(length) - 1;
      }
    },
    researshOffice(data) {
      this.$router.push(
        {
          path: "/admin/teachingTaskManage/teachingclass/teachingResearchOffice",
          query: {
            jysId: data.jysId,
            xiId: data.xiId,
            name: data.jys,
            xq: this.xq,
            xqName:this.xqName
          }
        }
      );
    },
    researshOffice_Xi(data) {
      this.$router.push(
        {
          path: "/admin/teachingTaskManage/teachingclass/teachingResearchOffice",
          query: {
            jysId: "",
            xiId: data.xiId,
            name: data.xi,
            xq:this.xq,
            xqName:this.xqName
          }
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import "../../../../../styles/applicationDeferment.less";
.manual-entry-container {
  width: 100%;
  > div:nth-child(1) {
    width: calc(100% - 40px);
    height: calc(100vh - 260px);
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 20px auto 0;
    overflow-y: auto;
    > ul:nth-child(2) {
      list-style: none;
      border-bottom: 1px solid rgba(0, 76, 167, 0.4);
      li {
        //border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        > span:nth-child(1) {
          width: 15%;
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          //border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          height: 120px;
          padding-top: 20px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          width: 15%;
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          //border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          height: 120px;
          padding-top: 20px;
          vertical-align: middle;
        }
        > span:nth-child(3) {
          width: 40%;
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          //border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          height: 120px;
          padding-top: 20px;
          vertical-align: middle;
          > ul {
            list-style: none;
            > li:nth-child(2) {
              height: 30px;
              display: flex;
              justify-content: center;
              > span {
                border: 0px solid rgba(0, 76, 167, 0.4);
                width: 33.3%;
                border-bottom: 0px solid rgba(0, 76, 167, 0.4);
              }
            }
            > li:nth-child(1) {
              height: 30px;
              display: flex;
              justify-content: center;
              border-bottom: 1px solid rgba(0, 76, 167, 0.4);
              > span {
                border: 0px solid rgba(0, 76, 167, 0.4);
                width: 33.3%;
                border-bottom: 0px solid rgba(0, 76, 167, 0.4);
              }
            }
          }
        }
        > span:nth-child(4) {
          width: 30%;
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          //border-right: 1px solid rgba(0, 76, 167, 0.4);
          //border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          height: 120px;
          padding-top: 20px;
          vertical-align: middle;
          > ul {
            list-style: none;

            li {
              display: flex;
              justify-content: center;
              height: 30px;
              > span:nth-child(n) {
                border: 0px solid rgba(0, 76, 167, 0.4);
                border-bottom: 0px solid rgba(0, 76, 167, 0.4);
                width: 33.3%;
              }
            }
          }
        }
      }
    }
    > ul:nth-child(1) {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 15%;
          }
          // &:nth-child(2n) {
          // 	width: 444px;
          // }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }
      &:nth-child(2) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            //height: 60px;
            &:nth-child(1) {
              width: 347px;
              height: 120px;
            }
            &:nth-child(2) {
              width: 347px;
              height: 120px;
            }
            &:nth-child(3) {
              width: 347px;
              height: 120px;
            }
            &:nth-child(4) {
              width: 347px;
            }
            &:nth-child(5) {
              width: 347px;
            }
            &.active {
              //border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }
          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;
              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }
                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
      .table_list {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 120px;
            &:nth-child(1) {
              width: 347px;
            }
            &:nth-child(2) {
              width: 347px;
            }
            &:nth-child(3) {
              width: 347px;
            }
            &:nth-child(4) {
              width: 347px;
            }
            &:nth-child(5) {
              width: 347px;
            }
            &.active {
              //border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }
          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;
              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }
                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  /deep/ .el-input--small .el-input__inner {
    height: 28px;
  }
}

.tables-header {
  display: flex;
  align-items: center;
  height: 120px;
  > div {
    width: calc((100% - 840px)*0.5);
    font-size: 16px;
    color: #004ca7;
    font-weight: bold;
    background: rgba(77, 129, 192, 0.1);
    text-align: center;
    padding-left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  > div:nth-child(2) {
    border-left: 1px solid rgba(0, 76, 167, 0.4);
  }

  > div:nth-last-child(2) {
    width: 420px;
  }
  > div:nth-last-child(1) {
    width: 420px;
    // border-right: 0;
  }
}

.tables-cont {
  display: flex;
  align-items: center;
  color: #004ca7;
  border-bottom: 1px solid rgba(0, 76, 167, 0.4);
  .xi {
    width: calc((100% - 840px)*0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .other {
    width: calc(100% - ((100% - 840px)*0.5));
  }
  .tables-item {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.4);
    border-left: 1px solid rgba(0, 76, 167, 0.4);
    > div:nth-child(1) {
      width: calc(100% - 840px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    > div:nth-child(2) {
      width: 420px;
    }
    > div:nth-child(3) {
      width: 420px;
    }
  }

  .tables-item:nth-last-child(1) {
    border-bottom: 0;
  }
}

.column-dir {
  flex-direction: column;
  .header-1 {
    border-bottom: 1px solid rgba(0, 76, 167, 0.4);
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-left: 1px solid rgba(0, 76, 167, 0.4);
  }

  .header-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;

    .wid-4 {
      width: 25%;
      display: flex;
      height: 100%;
      border-left: 1px solid rgba(0, 76, 167, 0.4);
      align-items: center;
      justify-content: center;
    }

    .wid-3 {
      width: 33.3%;
      display: flex;
      height: 100%;
      border-left: 1px solid rgba(0, 76, 167, 0.4);
      align-items: center;
      justify-content: center;
    }

  }
}

.undeLine {
  text-decoration: underline;
  cursor: pointer;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
